<main>
    <header id="head">
        <div class="custom-search-box">
            <router-link to="/search" class="search">
                <van-search v-model="searchVal" placeholder="换季收纳好物特惠" />
            </router-link>
        </div>
    </header>

    <section class="custom-sort-box">
        <div class="custom-sort-hd">
            <div :class="{active:sortType == 'comprehensive', 'custom-comprehensive-box': true}"
                @click="chooseSort('comprehensive', false)">
                <div class="custom-sort-title">综合</div>
            </div>
            <div :class="{active:sortType == 'price', 'custom-price-box': true}" @click="chooseSort('price', true)">
                <div class="custom-sort-title">价格</div>
            </div>
            <div :class="{active:sortType == 'classify', 'custom-classify-box': true}"
                @click="chooseSort('classify', true)">
                <div class="custom-sort-title">分类</div>
            </div>
        </div>
        <div class="custom-sort-bd">
            <div class="m-priceSort" v-show="isShowBox && sortType == 'price'" @click.stop="showBox()">
                <div class="form">
                    <div class="formGroup">
                        <label class="label">筛选</label>
                        <input class="ipt nofocus" placeholder="最低价" type="number" v-model="minPrice">
                        <div class="line"></div>
                        <input class="ipt nofocus" placeholder="最高价" type="number" v-model="maxPrice">
                    </div>
                    <div class="formGroup">
                        <label class="label">排序</label>
                        <button class="smallBtn" v-for="(value,key,index) in priceSortKey" :key="index" :class="[{curr: index === priceSortKeyCurr},'tag tag-hollow']" @click="priceSortKeySelect(value,index)">{{value.txt}}</button>                       
                    </div>
                </div>
                <div class="btnGroup">
                    <button class="btn cancel" @click.stop="unShowBox()">取消</button>
                    <button class="btn ok" @click.stop="sortPriceConfirm()">确定</button>
                </div>
            </div>
            <div class="mulitiValsDropdown" v-show="isShowBox && sortType == 'classify'">
                <ul class="list">
                    <li class="item active">全部</li>
                    <li class="item">居家生活</li>
                    <li class="item">个护清洁</li>
                    <li class="item">严选全球</li>
                    <li class="item">数码家电</li>
                    <li class="item">原创设计</li>
                </ul>
            </div>
        </div>
    </section>
    <section class="pt10 bgc-fff">
        <Goods :goods='goods' :class="'custom-flex-item-2 custom-descript-absolute'"></Goods>
    </section>
    <section class="custom-nodata" v-if="goodsLen">
        <i class="icon icon-search"></i>
        <p>抱歉，没有找到符合条件的商品</p>
        <p>建议修改筛选条件重新查找</p>
    </section>
    <section class="custom-mask" v-show="isShowBox" @click="unShowBox()"></section>
</main>